<template>
  <div class="m-trade">
    <h3 v-if="showTotal<100000">{{$t('trade.totalTip')}}（{{total|filterNum}}{{$t('trade.count')}}）</h3>
    <h3
      v-else
    >{{$t('trade.totalTip')}}{{showTotal|filterNum}}{{$t('trade.count')}}（{{$t('trade.tip')}}）</h3>
    <div class="bottom-page">
      <page-container
        @pageChange="pageChange"
        @sizeChange="sizeChange"
        :currentPage="params[0].page.number"
        :pageSize="params[0].page.size"
        :total="total"
      ></page-container>
    </div>
    <!-- 表格部分 -->
    <el-table
      :data="txList"
      stripe
      style="width: 100%"
      class="data-table"
      :cell-class-name="groupCellName"
    >
      <template slot="empty">
        <div>
          <div
            v-if="Loading"
            class="loading-line"
            v-loading="Loading"
            element-loading-text="Loading..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <span v-else>{{$t('page.nodata')}}</span>
        </div>
      </template>
      <el-table-column label width="25">
        <template slot-scope="item">
          <div>
            <div
              :class="{'start-line':item.row.tradeG===3,'middle-line':item.row.tradeG===1,'end-line':item.row.tradeG===2}"
            >
              <span v-if="item.row.tradeG===3"></span>
              <i></i>
              <span v-if="item.row.tradeG!==3"></span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('trade.hash')" min-width="180">
        <template slot-scope="item">
          <div>
            <p class="group-title" v-if="item.row.tradeG===3">{{$t('txDetail.groupTx')}}</p>
            <router-link :to="`/tradeHash?hash=${item.row.hash}`" class="light flex-left">
              <i
                class="iconfont err-ico"
                :class="{'iconjinggao-chucuo':item.row.success===false&&item.row.is_para===false}"
              ></i>
              {{item.row.hash|filterHash(10)}}
            </router-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('trade.time')" width="160">
        <template slot-scope="item">
          <count :time="item.row.block_time"></count>
        </template>
      </el-table-column>
      <el-table-column :label="$t('trade.sender')" min-width="175">
        <template slot-scope="item">
          <router-link
            :to="`/address?address=${item.row.from}`"
            class="light"
          >{{item.row.from|filterHash(10)}}</router-link>
        </template>
      </el-table-column>
      <el-table-column width="60">
        <template slot-scope="item">
          <i class="iconfont iconjiantou-you"></i>
        </template>
      </el-table-column>
      <el-table-column :label="$t('trade.receiver')" min-width="175">
        <template slot-scope="item">
          <router-link
            :to="`/address?address=${item.row.to}`"
            class="light"
          >{{item.row.to|filterHash(10)}}</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="fee" :label="$t('trade.num')" width="120">
        <template slot-scope="item">{{item.row|TradeValue}}</template>
      </el-table-column>
      <el-table-column :label="$t('trade.fee')" width="110">
        <template slot-scope="item">{{item.row.fee|filterFee}}</template>
      </el-table-column>
      <el-table-column :label="$t('trade.func')" width="120">
        <template
          slot-scope="item"
        >{{item.row.action_name==='unknown'? 'none':item.row.action_name}}</template>
      </el-table-column>
      <el-table-column :label="$t('trade.token')" width="80" align="center">
        <template slot-scope="item">
          <img :src="item.row.icon" class="token-icon" />
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom-page flex-right">
      <page-container
        @pageChange="pageChange"
        @sizeChange="sizeChange"
        :currentPage="params[0].page.number"
        :pageSize="params[0].page.size"
        :total="total"
        :simple="false"
      ></page-container>
    </div>
  </div>
</template>

<script>
import PageContainer from "@/components/mobile/PageContainer.vue";
import tradeBase from "@/mixins/Trade/trades.js";
import Count from "@/components/Count.vue";
export default {
  mixins: [tradeBase],
  components: {
    PageContainer,
    Count
  }
};
</script>

<style lang="scss">
.m-trade {
  padding: 11px 20px 17px;
  min-height: calc(100vh - 113px);
  h3 {
    color: #53657a;
    font-size: 14px;
    font-family: PingFangSC-Semibold;
  }
  .data-table {
    margin-top: 15px;
    box-shadow: 0 0.5rem 1.2rem rgba(189, 197, 209, 0.2);
    border-radius: 2px;
    border: 1px solid rgba(235, 239, 241, 1);
    color: $black;
    font-size: 12px;
    .err-ico {
      color: #e45359;
      font-size: 12px;
      width: 13px;
      margin-right: 5px;
      display: inline-flex;
    }
    .el-table__header thead tr {
      height: 60px;
    }
    .iconjiantou-you {
      font-size: 20px;
      color: #9aaab9;
    }
    .token-icon {
      height: 23px;
    }
    .tx-start,
    .tx-middle,
    .tx-end {
      background: $group_bg !important;
      .light,
      .iconjiantou-you {
        color: $group_title;
      }
    }
    .tx-start {
      padding-top: 45px;
    }
    .tx-start:nth-of-type(2) {
      padding-top: 0;
      // .cell {
      //   padding: 0;
      // }
    }
    .tx-start:nth-of-type(1),
    .tx-middle:nth-of-type(1),
    .tx-end:nth-of-type(1) {
      padding: 0;
      text-align: center;
      span {
        background: $group_title;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        display: block;
      }
      i {
        margin: 0 auto;
        display: block;
        width: 1px;
        background: $group_title;
      }
      .start-line {
        position: absolute;
        bottom: 0;
        width: 5px;
        span {
          margin: 0 auto;
        }
        i {
          height: 17.5px;
        }
      }
      .middle-line {
        width: 5px;
        span {
          position: absolute;
          top: 45%;
        }
        i {
          height: 60px;
        }
      }
      .end-line {
        position: absolute;
        top: 0;
        width: 5px;
        span {
          margin: 0 auto;
        }
        i {
          height: 17.5px;
        }
      }
    }
    .group-title {
      margin: 15px 0 9px 20px;
      font-size: 14px;
      font-family: PingFangSC-Semibold;
      font-weight: 500;
      color: $group_title;
    }
  }
  .loading-line {
    height: 60px;
    line-height: 18px;
  }
  .bottom-page {
    margin: 20px 0;
    text-align: right;
  }
  .el-table th:nth-of-type(2) .cell {
    padding-left: 30px;
  }
}
</style>